<template>
<div class="order-container">
    <el-card class="order-card" shadow="never">
        <!-- 搜索区域 -->
        <div class="search-bar">
            <el-form :inline="true" :model="search" class="search-form">
                <el-form-item label="订单号">
                    <el-input v-model="search.id" placeholder="请输入订单号" clearable />
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input v-model="search.userId" placeholder="请输入用户ID" clearable />
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select style="width: 150px" v-model="search.status" placeholder="请选择状态" clearable>
                        <el-option
                            v-for="item in orderStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-config-provider :locale="zhCn">
                        <el-date-picker
                            v-model="search.dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="YYYY-MM-DD"
                        />
                    </el-config-provider>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="pageSearch()">
                        <el-icon><Search /></el-icon>搜索
                    </el-button>
                    <el-button @click="pageSearch()">
                        <el-icon><Refresh /></el-icon>刷新
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 订单表格 -->
        <el-table
          :data="orders"
          border
          stripe
          style="width: 100%"
          height="calc(100vh - 280px)"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#606266',
            fontWeight: 600,
            height: '44px'
          }"
        >
            <!-- 订单展开 -->
            <el-table-column type="expand" width="40">
                <template #default="{ row }">
                    <div class="order-detail">
                        <!-- 订单信息 -->
                        <div class="detail-section">
                            <div class="section-header">
                                <div class="section-title">
                                    <el-icon><Document /></el-icon>
                                    <span>订单信息</span>
                                </div>
                                <el-tag 
                                    size="small" 
                                    effect="plain"
                                    class="status-tag"
                                    :type="tagType(row.status)"
                                >
                                    {{ row.status }}
                                </el-tag>
                            </div>
    
                            <div class="info-grid">
                                <div class="info-item">
                                    <span class="info-label">下单用户:</span>
                                    <span class="info-value order-no">{{ row.user.username }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">用户ID</span>
                                    <span class="info-value">{{ row.user.id }}</span>
                                </div>
                                <div class="info-item" v-if="row.status === '已完成'">
                                    <span class="info-label">送达时间：</span>
                                    <span class="info-value">{{ row.deliveryTime }}</span>
                                </div>
                            </div>
                            
                            <div class="info-divider"/>

                            <div class="info-grid">
                                <div class="info-item">
                                    <span class="info-label">订单编号：</span>
                                    <span class="info-value order-no">{{ row.id }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">下单时间：</span>
                                    <span class="info-value">{{ row.status != '待支付'? row.orderTime : '-' }}</span>
                                </div>
                                <div class="info-item" v-if="row.status === '已完成'">
                                    <span class="info-label">送达时间：</span>
                                    <span class="info-value">{{ row.deliveryTime }}</span>
                                </div>
                            </div>
                            
                            <div class="info-divider"/>

                            <div class="receiver-grid">
                                <div class="info-item">
                                    <span class="info-label">收货人：</span>
                                    <span class="info-value">{{ row.address.name }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">联系电话：</span>
                                    <span class="info-value">{{ row.address.phone }}</span>
                                </div>
                                <div class="info-item full-width">
                                    <span class="info-label">收货地址：</span>
                                    <span class="info-value">{{ row.address.address }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- 商品信息 -->
                        <div class="detail-section">
                            <div class="section-header">
                                <div class="section-title">
                                    <el-icon><ShoppingCart /></el-icon>
                                    <span>商品信息</span>
                                </div>
                                <span class="total-amount">订单金额：<em>￥{{ row.finalPrice }}</em></span>
                            </div>
                            <div class="goods-list">
                                <div v-for="item in row.products" :key="item.id" class="goods-item">
                                    <el-image 
                                      :src="item.image" 
                                      fit="cover" 
                                      class="goods-image" 
                                    />
                                    <div class="goods-info">
                                        <div class="goods-name">{{ item.name }}</div>
                                        <div class="goods-desc">{{ item.description }}</div>
                                    </div>
                                    <div class="goods-price">
                                        <div class="price-info">
                                            <span class="current-price">￥{{ item.currentPrice }}</span>
                                            <span class="original-price">￥{{ item.originalPrice }}</span>
                                        </div>
                                        <div class="quantity">x{{ item.count }}</div>
                                    </div>
                                    <div class="goods-subtotal">
                                        <div class="subtotal-label">小计</div>
                                        <div class="subtotal-value">￥{{ (item.currentPrice * item.count).toFixed(2) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 配送信息 -->
                        <div class="detail-section" v-if="row.rider">
                            <div class="section-header">
                                <div class="section-title">
                                    <el-icon><Van /></el-icon>
                                    <span>配送信息</span>
                                </div>
                            </div>
                            <div class="delivery-info">
                                <div class="rider-avatar">
                                    <el-avatar :size="50" :src="'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
                                    <span class="rider-name">{{ row.rider.name }}</span>
                                </div>
                                <div class="rider-info">
                                    <div class="info-item">
                                        <span class="info-label">工号：</span>
                                        <span class="info-value">{{ row.rider.id }}</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-label">电话：</span>
                                        <span class="info-value">{{ row.rider.phone }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column type="index" label="序号" width="100" align="center" />
            <el-table-column prop="id" label="订单号" width="280" show-overflow-tooltip/>
            <el-table-column label="下单时间" width="240" align="center" >
                <template #default="{ row }">
                    <div class="receiver-info">
                        <span class="receiver-name">{{ row.status != '待支付'? row.orderTime : '-' }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="收货信息" min-width="180">
                <template #default="{ row }">
                    <div class="receiver-info">
                        <div class="receiver-main">
                            <span class="receiver-name">{{ row.address.name }}</span>
                            <el-divider direction="vertical" />
                            <span class="receiver-phone">{{ row.address.phone }}</span>
                        </div>
                        <div class="receiver-address" :title="row.address.address">
                            {{ row.address.address }}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单金额" width="100" align="right">
                <template #default="{ row }">
                    <span class="amount">￥{{ row.finalPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="80" align="center">
                <template #default="{ row }">
                    <el-tag size="small" :type="tagType(row.status)">
                        {{ row.status }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="配送骑手" width="240" align="center">
                <template #default="{ row }">
                    <template v-if="row.rider">
                        <div class="rider-info">
                            <div class="rider-name">{{ row.rider.name }}</div>
                            <div class="rider-detail">
                                <span class="rider-no">{{ row.rider.id }}</span>
                                <span class="rider-phone">{{ row.rider.phone }}</span>
                            </div>
                        </div>
                    </template>
                    <span v-else class="placeholder">-</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="100" align="center" fixed="right">
                <template #default="{ row }">
                    <el-button-group class="operation-group">
                        <template v-if="row.status === '待发货'">
                            <el-tooltip content="发货" placement="top">
                                <el-button type="success" link @click="handleShip(row)">
                                    <el-icon><Van /></el-icon>
                                </el-button>
                            </el-tooltip>
                        </template>
                        <template v-if="row.status === '配送中'">
                            <el-tooltip content="完成配送" placement="top">
                                <el-button type="success" link @click="complete(row)">
                                    <el-icon><Check /></el-icon>
                                </el-button>
                            </el-tooltip>
                        </template>
                        <template v-if="row.status !== '已完成'">
                            <el-tooltip content="取消订单" placement="top">
                                <el-button type="danger" link @click="cancle(row)">
                                    <el-icon><Close /></el-icon>
                                </el-button>
                            </el-tooltip>
                        </template>
                        <template v-if="row.status === '已完成'">-</template>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination 
                v-model:current-page="page.currentPage" 
                v-model:page-size="page.pageSize" 
                :page-sizes="[5, 10, 20]"
                :total="page.total" 
                layout="total, sizes, prev, pager, next, jumper" 
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </el-card>
</div>

<!-- 选择骑手 -->
<el-dialog v-model="showSelectRider" title="选择骑手" v-on:close="() => {riderRadio = undefined; searchRider = '';}">
    <el-input
        v-model="searchRider"
        placeholder="骑手 ID 或者 名称"
        clearable
    />
    <el-radio-group v-model="riderRadio" style="margin-top: 20px;">
        <el-radio :value="rider.id" v-for="rider in filterRiders" :key="rider.id">
          {{ rider.name + "/ " + rider.id }}
        </el-radio>
      </el-radio-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showSelectRider = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">
            确定
          </el-button>
        </span>
      </template>
</el-dialog>
</template>

<script setup lang="ts">
import { Page } from '@/models/baseModel';
import { getInitOrderSearch, Order, OrderApi, OrderSearch, orderStatus } from '@/models/orderModel';
import { Rider, RiderApi } from '@/models/riderModel';
import { computed } from '@vue/reactivity';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { EpPropMergeType } from 'element-plus/es/utils';
import { onMounted, ref } from 'vue';

// 订单搜索条件
const search = ref<OrderSearch>(getInitOrderSearch())
// 订单数据列表
const orders = ref<Order[]>([])
// 分页实体
const page = ref<Page>({currentPage: 1, pageSize: 5, total: 0})
// 显示骑手选择
const showSelectRider = ref(false)
// 骑手列表
const riders = ref<Rider[]>([])
// 选中的骑手
const riderRadio = ref()
// 搜索骑手
const searchRider = ref<string>("")
// 筛选的骑手
const filterRiders = computed(() => {
    if (!searchRider) return riders.value
    return riders.value.filter(item =>  item.id.includes(searchRider.value) || item.name.includes(searchRider.value))
})
// 对一个订单发货的表单
const shipForm = ref({
  riderId: '',
  orderId: ''
})

onMounted(() => {
    // 获取订单数据
    pageSearch()
    // 获取骑手数据
    RiderApi.getAll()
    .then(data => {riders.value = data})
})

// 订单发货前置
const handleShip = (row: Order) => {
    showSelectRider.value = true
    shipForm.value.orderId = row.id
}

// 发送订单
const handleSubmit = () => {
  shipForm.value.riderId = riderRadio.value
  OrderApi.delivery(shipForm.value)
  .then(() => {
    pageSearch()
    riderRadio.value = ''
    searchRider.value = ''
    showSelectRider.value = false
  })
}

// 获取订单状态
const tagType = (status: string) => {
  for (let index = 0; index < orderStatus.length; index++) {
    const element = orderStatus[index];
    if (status == element.label) {
      return element.type as EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown>
    }
  }
}

// 取消订单
const cancle = (row: Order) => {
  OrderApi.cancel(row.id)
  .then(() => {
    orders.value = orders.value.filter(item => item.id != row.id)
  })
}

// 完成订单
const complete = (row: Order) => {
  OrderApi.complete(row.id)
  .then(() => {
    pageSearch()
  })
}

// 分页获取数据
const pageSearch = (currentPage: undefined | number = undefined) => {
    if (currentPage) page.value.currentPage = currentPage
    OrderApi.pagingSearch(search.value, page.value)
    .then(resultPage => {
        page.value.currentPage = resultPage.currentPage
        page.value.pageSize = resultPage.pageSize
        page.value.total = resultPage.total
        orders.value = resultPage.data
    })
}

// 每页大小改变时
const handleSizeChange = (val: number) => {
    page.value.pageSize = val
    pageSearch()
}

// 页码改变时
const handleCurrentChange = (val: number) => {
    page.value.currentPage = val
    pageSearch()
}
</script>

<style scoped>
.order-container {
  height: 100%;
}

.order-card {
  height: 100%;
  border-radius: 8px;
}

.search-bar {
  padding: 16px 0;
  margin-bottom: 16px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 16px;
}

.order-items {
  padding: 20px;
  background-color: #f5f7fa;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
}

.order-item:last-child {
  margin-bottom: 0;
}

.item-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 16px;
  object-fit: cover;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-right: 24px;
}

.item-name {
  font-size: 15px;
  color: #303133;
  font-weight: 500;
}

.item-desc {
  font-size: 13px;
  color: #909399;
  line-height: 1.4;
}

.item-price-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-price {
  font-size: 15px;
  color: #f56c6c;
  font-weight: bold;
}

.original-price {
  font-size: 13px;
  color: #909399;
  text-decoration: line-through;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 24px;
}

.quantity-label {
  font-size: 13px;
  color: #909399;
  margin-right: 4px;
}

.quantity-value {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.item-subtotal {
  min-width: 100px;
  text-align: right;
}

.subtotal-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 4px;
}

.subtotal-value {
  font-size: 15px;
  color: #f56c6c;
  font-weight: bold;
}

.amount {
  color: #f56c6c;
  font-weight: bold;
}

.operation-group {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.operation-group .el-button {
  font-size: 16px;
  padding: 4px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

:deep(.el-table__expanded-cell) {
  padding: 0 !important;
}

:deep(.el-table__expand-icon) {
  transform: rotate(90deg);
  margin-right: 0;
}

:deep(.el-table__expand-icon--expanded) {
  transform: rotate(180deg);
}

.receiver-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 16px;
}

.receiver-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.receiver-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.receiver-phone {
  font-size: 14px;
  color: #606266;
}

.receiver-address {
  font-size: 13px;
  color: #909399;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 移除不需要的样式 */
.delivery-info,
.info-title,
.info-content,
.info-item,
.buyer-info,
.buyer-name,
.buyer-phone {
  display: none;
}

:deep(.el-table__row) {
  height: 60px;
}

:deep(.el-table__cell) {
  padding: 8px 0;
}

.rider-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rider-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.rider-detail {
  font-size: 13px;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rider-detail :deep(.el-divider--vertical) {
  margin: 0;
  height: 12px;
}

.placeholder {
  color: #909399;
}

/* 优化表格样式 */
:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-header-bg-color: #f5f7fa;
  --el-table-row-hover-bg-color: #f5f7fa;
}

:deep(.el-table__row) {
  height: 56px;
}

:deep(.el-table__cell) {
  padding: 4px 0;
}

.order-no {
  font-family: Consolas, monospace;
  color: #606266;
}

.receiver-info {
  padding: 4px 8px;
}

.receiver-main {
  gap: 8px;
  margin-bottom: 2px;
}

.receiver-name {
  font-weight: 500;
}

.receiver-address {
  -webkit-line-clamp: 1;
  color: #909399;
}

.rider-info {
  gap: 2px;
}

.rider-name {
  font-weight: 500;
}

.rider-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: #909399;
}

.rider-no {
  color: #909399;
}

:deep(.el-tag--small) {
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
}

.operation-group {
  gap: 8px;
}

.operation-group .el-button {
  padding: 4px;
}

:deep(.el-table__expand-column .cell) {
  padding: 0 8px;
}

/* 详情整体样式 */
.order-detail {
  padding: 24px;
  background-color: #f5f7fa;
}

.detail-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.detail-section:last-child {
  margin-bottom: 0;
}

/* 区块标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.section-title .el-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}

.status-tag {
  font-weight: normal;
}

/* 信息网格样式 */
.info-grid, .receiver-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 16px 0;
}

.full-width {
  grid-column: span 2;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-label {
  color: #909399;
  font-size: 14px;
  min-width: 70px;
}

.info-value {
  color: #606266;
  font-size: 14px;
}

/* 商品列表样式 */
.goods-list {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.goods-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-image {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  margin-right: 16px;
  object-fit: cover;
}

.goods-info {
  flex: 1;
  margin-right: 24px;
}

.goods-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 4px;
}

.goods-desc {
  font-size: 13px;
  color: #909399;
  line-height: 1.4;
}

.goods-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 24px;
  min-width: 100px;
}

.price-info {
  margin-bottom: 4px;
}

.quantity {
  font-size: 13px;
  color: #909399;
}

.goods-subtotal {
  min-width: 100px;
  text-align: right;
}

.total-amount {
  font-size: 14px;
  color: #606266;
}

.total-amount em {
  font-style: normal;
  font-size: 16px;
  color: #f56c6c;
  font-weight: bold;
  margin-left: 4px;
}

/* 配送信息样式 */
.delivery-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rider-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rider-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.rider-info {
  display: flex;
  gap: 24px;
}
</style> 